<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>music</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="css/music.css" />
	<link type="text/css" rel="stylesheet" href="../../css/jRating.jquery.css" />
	<link type="text/css" rel="stylesheet" href="../../css/popeWin.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../../js/jRating.jquery.js"></script>
	<script type="text/javascript" src="../../js/popeScroll.js"></script>
	<script type="text/javascript" src="../../js/popeWin.js"></script>
	<script language="JavaScript" type="text/JavaScript">
		var id;
		$(document).ready(function() {
			var cururl = window.location.href;
			id = cururl.split('=')[1];
			$(window).resize(function() {
				refresh();
			});
			
			$.getJSON("music_getPlaylistById.do",{playlistId:id},function(json){
				var isSys = json.isSys;
				var descp = json.descp;
				var type = "";
				if(isSys){
					type = "来自：系统创建";
				}else{
					type = "来自：用户创建";
				}
				if(descp==null||descp==""){
					descp = "暂无";
				}
				$("#mod_title span").empty();
				$("#mod_type p").empty();
				$("#mod_time p").empty();
				$("#mod_content p").empty();
				$("#mod_img").empty();
				$("#mod_title span").append(json.name);
				$("#mod_time p").append("创建时间："+json.createTime);
				$("#mod_type p").append(type);
				$("#mod_content p").append("简介："+descp);
				$("#mod_img").append('<img src="'+ json.imageUrl +'"  title="'+ json.name +'" style="width:90%;" />');
			});
			
			$.getJSON("music_getMusicByPlaylistId.do",{playlistId:id},function(json){
				$("#music_list").empty();
				var htmlstr = "";
				for(var i=0;i<json.length;i++){
					htmlstr += '<div style="width:100%;height: 6%;margin: 1% 0;float: left;line-height: 6%;" onmouseover="showCp(this);" onmouseout="hideCp(this);">';
					htmlstr += '<div class="music_info" style="width:40%;height: 100%;line-height: 100%;float: left;"><span style="font-size: 16px;">'+json[i].songName+'&nbsp;-&nbsp;'+json[i].singerName+'</span></div>';
					htmlstr += '<div class="music_cp" style="width:40%;height: 100%;float: left;display: none;">';
					htmlstr += '<img id="play_'+json[i].id+'" style="height: 80%;cursor: pointer;" src="images/wmp.png" title="播放" onclick="addToPlay(\''+ json[i].id +'\');" />';
					htmlstr += '<img id="add_'+json[i].id+'" style="height: 80%;cursor: pointer;" src="images/plus.png" title="添加" onclick="showMyPlaylist(this,2)" />';
					htmlstr += '</div>';
					htmlstr += '</div>';
				}	
				$("#music_list").append(htmlstr);
				refresh();
			});
			
			
			$("#toolcontent").hover(function(){
				$(this).removeClass("transparent_0");
				$(this).addClass("transparent_class");
			},function(){
				$(this).removeClass("transparent_class");
				$(this).addClass("transparent_0");
			});
			
			refresh();
		});
		
		function showCp(obj){
			$(obj).children(".music_cp").show();
		}
		
		function hideCp(obj){
			$(obj).children(".music_cp").hide();
		}
		
		function showMyPlaylist(obj,type){
			$(".popeWinMini").remove();
			$.getJSON("music_getMyPlaylist.do",{playlistId:id},function(json){
				var htmlStr = '<div style="width:140px;height:160px;background:url(../../image/bg/7.png);padding-left:10px;">';
				htmlStr += '<div style="cursor: pointer;float: left;width: 100%;height: 30px;line-height: 30px;font-size:14px;">添加到我的歌单</div>';
				for(var i=0;i<json.length;i++){
					if(type==1){
						htmlStr += '<div style="cursor: pointer;float: left;width: 100%;height: 20px;line-height: 20px;"><a onclick="addAllToPlaylist(\''+ json[i].id +'\')">'+json[i].name+'</a></div>';
					}else if(type==2){
						var musicId = obj.id.split("_")[1];
						htmlStr += '<div id="'+json[i].id+'" style="cursor: pointer;float: left;width: 100%;height: 20px;line-height: 20px;"><a onclick="addToPlaylist(\''+ json[i].id +'\',\''+ musicId +'\')">'+json[i].name+'</a></div>';
					}
					
				}
				htmlStr += '</div>';
				openPLWin(obj.id,htmlStr);
				
			});
		}
		
		function openPLWin(id,html){
			$.popeWinMini({
				id:id,
				width:150,
				height:160,
				content:html
			});
		}
		function closePLWin(id){
			$.popeWinMiniClose({
				id:id
			});
		}
		
		function addAllToPlay(){
			$.getJSON("music_getMusicByPlaylistId.do",{playlistId:id},function(json){
				window.parent.parent.addAllToplay(json);
			});
		}
		
		function addToPlay(musicId){
			$.getJSON("music_getMusicById.do",{id:musicId},function(json){
				window.parent.parent.addToplay(json);
			});
			
		}
		
		function addAllToPlaylist(playlistId){
			$.get("music_addAllPlaylist.do",{playlistId:playlistId,objId:id,type:3},function(data){
				if(data=="success"){
					closePLWin("add_all");
					
				}
			});
		}
		
		function addToPlaylist(playlistId,musicId){
			$.get("music_addPlaylist.do",{playlistId:playlistId,musicId:musicId},function(data){
				if(data=="success"){
					closePLWin("add_"+musicId);
					
				}
			});
		}
		
		function goback(){
			window.parent.resizeWin("music1",0.5,0.8);
			window.location.href = "main.html";
		}


		function refresh(){
			var winheight = $(window).height();
			var winwidth = $(window).width();
			$("#bodydiv").css("height",winheight);
			$("#mod").css("height",winheight*0.4);
			$("#mod_content").css("height",winheight*0.4*0.9-110);
			$("#musics").css("height",winheight*0.6);
			$("#music_list").css("height",winheight*0.6-30);
		}
		
	</script>
</head>
<body style="background-color=transparent;width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../../image/bg/6.png)">
		<div id="mod" style="width:90%;float:left;margin:0 5%;">		
			<div id="mod_img" style="width:25%;margin: 2%;float:left;">
				
			</div>
			<div id="mod_con" style="width:35%;height:90%;margin: 2%;float:left;">
				<div id="mod_title" style="width: 100%;height: 50px;line-height: 50px;float: left;"><span style="font-size: 24px;background-color: #C4581C;"></span></div>
				<div id="mod_type" style="width: 100%;height: 30px;line-height: 30px;float: left;"><p style="font-size: 14px;"></p></div>
				<div id="mod_time" style="width: 100%;height: 30px;line-height: 30px;float: left;"><p style="font-size: 14px;"></p></div>
				<div id="mod_content" style="width: 100%;float: left;"><p style="font-size: 14px;"></p></div>
			</div>
		</div>
		<div id="musics" style="width:90%;float:left;margin:0 5%;">
			<div style="width:80px;;height: 30px;line-height: 30px;margin: 1% 1%;float:left;">
				<span style="font-size: 16px;margin-right: 10px;">曲目列表</span>
			</div>
			<div style="width:100px;;height: 30px;margin: 1% 1%;float:left;">
				<img style="width:30px;height: 30px;cursor: pointer;" src="../../image/cover/media/white/MB_0000_WMP.png" title="全部播放" onclick="addAllToPlay();" />
				<img id="add_all" style="width:30px;height: 30px;cursor: pointer;" src="../../image/cover/others/white/MB_0019_plus.png" title="全部添加" onclick="showMyPlaylist(this,1)" />
			</div>
			<div id="music_list" style="width:90%;margin: 0 2%;float:left;" >
				
			</div>
		</div>
		<div id="toolcontent" class="toolcontent transparent_0">
			<div style="height:100%;">
				<img title="返回" src="../../image/cover/system/white/MB_0006_back.png" style="width:60px;height:60px;cursor:pointer;float:right;padding-right:10px;" onclick="goback();" /> 
			</div>
		</div>
	</div>
</body>
</html>